<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-10-20 09:13:44
 * @LastEditors: huangtianyang
 * @LastEditTime: 2024-02-23 14:36:50
 * @FilePath: \cxl-admin\src\pages\finance\reconciliationCollect\list\Index.vue
-->
<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2022-12-02 17:04:14
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-10-16 09:58:48
 * @FilePath: \cxl-admin\src\pages\finance\reconciliationCollect\list\Index.vue
-->

<template>
    <div class="page-box">
        <TemplateVue
            :page="data.pageData"
            @search="data.onSearch"
            @reset="data.onReset"
            @paginationChange="data.onPaginationChange"
            @paginationSize="data.onPaginationSize"
            @operation="data.onOperation"
        >
        </TemplateVue>
        <detailedVue :data="data.detailed" @visible="data.onReconciliationCollectDetailedVisible"></detailedVue>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import TemplateVue from '@/components/template/Index.vue'
import { ReconciliationCollectData } from '.'
import detailedVue from '../detailed/Index.vue'
/**
 * 初始化数据
 */
const data = reactive(new ReconciliationCollectData())
</script>

<style scoped lang="scss">
.total-information {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    > div {
        background-color: aliceblue;
        box-sizing: border-box;
        padding: 32px;
        width: calc(33.33% - 8px);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-radius: 8px;
    }
    p {
        font-size: 32px;
        font-weight: bold;
        i {
            font-size: 14px;
            font-weight: normal;
        }
    }
}
.batch {
    margin: 16px 0;
}
.table-container {
    height: calc(100% - 200px - 100px - 64px - 64px);
}
.pag {
    margin: 16px 0 0 0;
}
</style>
